<template>
  <div class="home">
    <div>
      <div @click="addArticle"><img class="el-image__inner" src="http://localhost:6060/img/callout.5b86dfc8.svg" /></div>
      <p>随心写作，表达自由</p>
      <el-button type="primary" @click="addArticle">开始写文章</el-button>
      <p>发现精彩</p>
    </div>
    <div class="box">
      <el-card class="box-card" v-for="item in list" :key="item._id">
        <el-image class="img" :src="item.avatar.url"></el-image>
        <div>{{ item.title }}</div>
        <p>{{ item.description }}</p>
        <el-button type="primary" plain @click="goDetails(item._id)">进入专栏</el-button>
      </el-card>
    </div>
    <div>
      <el-button type="primary" plain class="btn" @click="Loadmore">加载更多</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRef } from 'vue'
import { app } from '../utils/api'
import { useRouter } from 'vue-router'
const router = useRouter()

const data = reactive({
  currentPage: 1,
  pageSize: 6
})
const list = ref([])

app(data).then(res => {
  console.log(22, res);
  // data.total = res.data.count
  list.value = res.data.list
})

const addArticle = () => {
  router.push('/addArticle')
}

// 跳详情
const goDetails = (id: string) => {
  console.log(47, id);
  router.push({
    path: '/details',
    query: { id }
  })
}

// 加载更多
const Loadmore = () => {
  data.pageSize = data.pageSize + 3

  app(data).then(res => {
    console.log(22, res);
    // data.total = res.data.count
    list.value = res.data.list
  })
}

</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;


  .box-card {
    width: 31%;
    text-align: center;
    padding: 20px;
    margin: 10px;

    .img {
      width: 50px;
      height: 50px;
      margin: 10px 0;
    }

    p {
      margin: 15px 0;
      font-size: 14px;
    }
  }
}

.el-image__inner {
  width: 150px;
  height: 200px;
}

p {
  margin: 10px;
}

.btn {
  width: 130px;
}
</style>
